<template>
 
  <div class="question">
    <div class="title">
 <div>
  <van-icon class="question-icon" name="question-o" />
  <span @click="$router.push({name:'question',query:{id:q_id}})">{{ question }}</span>
</div>
      <div>
        <UserCtrl :id="q_id" />
    </div>
    </div>
    <div class="my-tag">
      <div v-for="item in tag_list" class="ny-tag-item" @click="$router.push({path:'/micircle',query:{id:item.id}})">
        <van-image
     width="1rem"
     height="1rem"
     :src="item.img"
    />
    <span class="my-tag-name">{{ item.tag }}</span>
      </div>
    </div>
     <div class="answer-list">
      <div class="answer-list-item" v-for="i in answer_list_v2">
  <div>
    <van-image
        round
     width="1.1rem"
     height="1.1rem"
     :src="i.icon"
    />
  </div>
    <p class="answer"  @click="$router.push({name:'question',query:{id:q_id}})">{{ i.answer }}</p>

      </div>
     </div>
   <CardCtrl :praise_num="praise_num" :answer_num="answer_num" :id="q_id" :my_up="props"/>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import UserCtrl from '../../../../components/UserCtrl.vue'
import CardCtrl from '../../../../components/CardCtrl.vue'

const props = defineProps<{
  q_id: string,
  content_type: number,
  question: string,
  answer_list_v2: Array<{
    icon: string,
    answer: string,
    belong_place: string
  }>
  answer_num: string,
  praise_num: (number|string),
  tag_list: Array<{
    id: number,
    tag: string,
    tag_type: number,
    tag_id: string,
    img: string,
  }>
  hot_comment?: Array<{
    name: string,
    comment: string,
    praise_num: string,
    comment_id: number,
  }>
}>();
let curId = ref<string>();
curId.value = props.q_id;
// console.log("问题里面的",props);

</script>

<style scoped lang="scss">
.question {
  padding:.625rem;
  background-color: #fff;
}
 .title {
  color:'pink';
  font-size:.975rem;
  display:flex;
  justify-content: space-between;
  // border-bottom: 1px solid #f3f3f3;
 }
 .question-icon {
  margin-right:.625rem;
}
.my-tag {
  margin-bottom: .3rem;
}
.my-tag-item {
  display: flex;
  align-items: center;
  padding: .3rem 0rem;
}
.my-tag-name {
  font-size: .8rem;
  color:#757575;

}
.answer-list {
  border-top: 1px solid #f3f3f3;
  padding-top: .625rem;
}
.answer-list-item {
  display: flex;
  align-items: center;
  font-size: 1rem;
  margin-bottom: .625rem;
}
.answer{
  margin: 0rem;
  padding: 0rem .625rem;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  font-size: .925rem;
  
}

</style>